<template>
	<view class="home">
		<!-- 引入搜索框组件 -->
		<view class="search-box">
			<my-search @myclick='toSearch'></my-search>
		</view>
		<!-- 轮播图区域 -->
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular=true indicator-active-color="#ffffff">
				<swiper-item v-for="(item,index) in bannerLists" :key="index">
					<navigator class="swiper-item" :url="'../../subpkg/goods_detail/goods_detail?goods_id='+item.goods_id">
						<image :src="item.image_src" mode="" ></image>
					</navigator>
				</swiper-item>
			</swiper>
			
		<!-- 分类模块 -->
			<view class="navlists">
				<view class="navItem" v-for="(item,index) in navlists" :key="index">
					<image :src="item.image_src" mode="" @click="navClickHandle(item)"></image>
				</view>
			</view>
			
		<!-- 楼层 -->
		<view class="floor">
				<view class="floor-item" v-for="(item,index) in floorLists" :key="index">
					<view class="floor-title">
						<image :src="item.floor_title.image_src" mode=""></image>
					</view>
					<view class="floor-item-content">
						<view class="floor-item-content-Lfft">
							<image :src="item.product_list[0].image_src"
							 :style="{width:item.product_list[0].image_width+'rpx'}" mode="widthFix"
							 @click="togoodsLists(item.product_list[0].navigator_url)"
							></image>
						</view>
						<view class="floor-item-content-Right">
							<view class="floorRight-img" v-for="(item1,idx) in item.product_list" :key="idx" v-if="idx!==0">
								<image :src="item1.image_src" :style="{width:item1.image_width+'rpx',height:'190rpx'}" 
									@click="togoodsLists(item1.navigator_url)"
								></image>
							</view>
						</view>
					</view>
				</view>
		</view>
	</view>
</template>

<script>
	// 导入自己封装的 mixin 模块
	import badgeMixins from '../../mixins/tabbar-badge.js'
	
	export default {
		// 将 badgeMix 混入到当前的页面中进行使用
		mixins: [badgeMixins],
		data() {
			return {
				bannerLists:[],//轮播图
				navlists:[],//分类栏
				floorLists:[],//楼层
			};
		},
		onLoad() {
			this.getBanner();
			this.getNavlists();
			this.getFloorLists();
		},
		methods: {
			// 点击搜索组件 跳转到搜索页面
			toSearch(){
				uni.navigateTo({
					url:'../../subpkg/search/search'
				})
			},
			// 楼层的点击事件，跳转到goods_lists页面  因为我做了分包，接口的跳转路径和我的不匹配，so先把返回的路径进行处理
			togoodsLists(navUrl){
				let navurl = `/subpkg/goods_lists/goods_lists?${navUrl.split('?')[1]}`;
				console.log('navUrl==>',navurl,`'${navurl}'`)
				uni.navigateTo({
				    url: navurl
				});
			},
			// 楼层数据
			async getFloorLists() {
				// {data:res} = await uni.$http.get('/api/public/v1/home/swiperdata') 对象的解构
				const {data:res} = await uni.$http.get('/api/public/v1/home/floordata')
				console.log('楼层 res==>',res)
				if(res.meta.status!=200){
					return uni.$showMsg();
				}
				this.floorLists = res.message;
			},
			// 分类点击事件
			navClickHandle(item){
					if(item.name=='分类'){
						uni.switchTab({
						    url: '/pages/cate/cate'
						});
					}
			},
			// 获取轮播图数据
			async getBanner() { 
				// {data:res} = await uni.$http.get('/api/public/v1/home/swiperdata') 对象的解构
				const {data:res} = await uni.$http.get('/api/public/v1/home/swiperdata')
				console.log('轮播图res==>',res)
				if(res.meta.status!=200){
					return uni.$showMsg();
				}
					this.bannerLists = res.message;
					uni.$showMsg("欢迎光临～",1500)
				
			},
			
			// 获取分类数据
			async getNavlists(){
				const {data:res} = await uni.$http.get('/api/public/v1/home/catitems');
				console.log('分类res==>',res);
				if(res.meta.status!=200){
					return uni.$showMsg();
				}
				this.navlists = res.message;
			}
		}
	}
</script>

<style lang="scss">
	// 搜索框吸顶 
	.search-box{
		position: sticky;
		top: 0;
		z-index: 999;
	}
	// 楼层
	.floor{
		padding: 20rpx;
		box-sizing: content-box;
		image{
			display: block;
		}
	}
	.floor-item{
		.floor-title{
			height: 60rpx;
			image{
				height: 100%;
			}
		}
		.floor-item-content{
			display: flex;
			// height: 300rpx;
			margin-bottom: 20rpx;
			.floor-item-content-Lfft{
				flex: 1;
				margin-right: 5rpx;
				// image{
				// 	width: 100%;
				// 	height: 100%;
				// }
			}
			.floor-item-content-Right{
				flex: 2;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
			}
		}
	}
	
	
	.navlists{
		width: 100%;
		height: 280rpx;
		display: flex;
		.navItem{
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			image{
				width: 140rpx;
				height: 140rpx;
				// margin: 70rpx auto 0 auto;
			}
		}
	}
swiper{
	height: 330rpx;
	.swiper-item{
		width: 100%;
		height: 100%;
		image{
			width: 100%;
			height: 330rpx;
		}
	}
}
		/deep/uni-swiper .uni-swiper-dots-horizontal{
			left: 88%;
		}
</style>
